<template>
  <div class="table-pagination" :class="{ 'mobile': isMobile }">
    <!-- 移动端分页 -->
    <div v-if="isMobile" class="mobile-pagination">
      <div class="pagination-info">
        <span class="total-info">共 {{ total }} 条数据</span>
        <span class="page-info">第 {{ currentPage }} / {{ totalPages }} 页</span>
      </div>
      
      <div class="mobile-controls">
        <el-button-group class="page-buttons">
          <el-button
            :disabled="currentPage <= 1"
            @click="handlePageChange(currentPage - 1)"
            :icon="ArrowLeft"
            size="small"
          >
            上一页
          </el-button>
          <el-button
            :disabled="currentPage >= totalPages"
            @click="handlePageChange(currentPage + 1)"
            :icon="ArrowRight"
            size="small"
          >
            下一页
          </el-button>
        </el-button-group>

        <el-select
          :model-value="pageSize"
          @update:model-value="handleSizeChange"
          size="small"
          style="width: 100px"
        >
          <el-option
            v-for="size in pageSizes"
            :key="size"
            :label="`${size}条/页`"
            :value="size"
          />
        </el-select>
      </div>

      <!-- 快速跳转（移动端） -->
      <div v-if="showQuickJumper" class="mobile-jumper">
        <span>跳至</span>
        <el-input
          v-model.number="jumpPage"
          type="number"
          :min="1"
          :max="totalPages"
          size="small"
          style="width: 80px; margin: 0 8px"
          @keyup.enter="handleQuickJump"
        />
        <span>页</span>
        <el-button
          size="small"
          type="primary"
          @click="handleQuickJump"
          style="margin-left: 8px"
        >
          确定
        </el-button>
      </div>
    </div>

    <!-- 桌面端分页 -->
    <div v-else class="desktop-pagination">
      <div class="pagination-left">
        <!-- 总计信息 -->
        <div class="pagination-info">
          <span>共 {{ total }} 条数据</span>
          <span v-if="showSelection && selectionCount > 0" class="selection-info">
            ，已选择 {{ selectionCount }} 条
          </span>
        </div>

        <!-- 批量操作 -->
        <div v-if="showBatchActions && selectionCount > 0" class="batch-actions">
          <slot name="batch-actions" :selection-count="selectionCount">
            <el-button
              type="danger"
              size="small"
              @click="$emit('batch-delete')"
            >
              批量删除
            </el-button>
          </slot>
        </div>
      </div>

      <div class="pagination-right">
        <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :page-sizes="pageSizes"
          :total="total"
          :layout="computedLayout"
          :pager-count="pagerCount"
          :small="small"
          :background="background"
          :disabled="disabled"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
          @prev-click="handlePrevClick"
          @next-click="handleNextClick"
          class="main-pagination"
        />
      </div>
    </div>

    <!-- 页面大小提示 -->
    <div v-if="showSizeHint" class="size-hint">
      <el-text size="small" type="info">
        当前每页显示 {{ pageSize }} 条，共 {{ totalPages }} 页
      </el-text>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'

// Props
const props = defineProps({
  // 当前页码
  currentPage: {
    type: Number,
    default: 1
  },
  // 每页条数
  pageSize: {
    type: Number,
    default: 20
  },
  // 总条数
  total: {
    type: Number,
    required: true
  },
  // 每页显示个数选择器的选项
  pageSizes: {
    type: Array,
    default: () => [10, 20, 50, 100]
  },
  // 组件布局
  layout: {
    type: String,
    default: 'total, sizes, prev, pager, next, jumper'
  },
  // 当总页数超过该值时才显示
  pagerCount: {
    type: Number,
    default: 7
  },
  // 是否为小型分页
  small: {
    type: Boolean,
    default: false
  },
  // 是否为分页按钮添加背景色
  background: {
    type: Boolean,
    default: true
  },
  // 是否禁用
  disabled: {
    type: Boolean,
    default: false
  },
  // 是否显示总数
  showTotal: {
    type: Boolean,
    default: true
  },
  // 是否显示快速跳转
  showQuickJumper: {
    type: Boolean,
    default: true
  },
  // 是否显示页面大小选择器
  showSizeChanger: {
    type: Boolean,
    default: true
  },
  // 是否显示选择统计
  showSelection: {
    type: Boolean,
    default: false
  },
  // 选择的条数
  selectionCount: {
    type: Number,
    default: 0
  },
  // 是否显示批量操作
  showBatchActions: {
    type: Boolean,
    default: false
  },
  // 是否显示页面大小提示
  showSizeHint: {
    type: Boolean,
    default: false
  },
  // 位置
  position: {
    type: String,
    default: 'right',
    validator: (value) => ['left', 'center', 'right'].includes(value)
  },
  // 自动响应式
  responsive: {
    type: Boolean,
    default: true
  }
})

// Emits
const emit = defineEmits([
  'update:current-page',
  'update:page-size',
  'page-change',
  'size-change',
  'prev-click',
  'next-click',
  'batch-delete'
])

// 响应式数据
const isMobile = ref(false)
const jumpPage = ref(1)

// 计算属性
const totalPages = computed(() => Math.ceil(props.total / props.pageSize))

const computedLayout = computed(() => {
  if (isMobile.value) {
    return 'prev, pager, next'
  }
  
  let layout = props.layout
  
  // 根据屏幕尺寸调整布局
  if (window.innerWidth < 768) {
    layout = 'prev, pager, next'
  } else if (window.innerWidth < 1024) {
    layout = 'total, prev, pager, next, sizes'
  }
  
  return layout
})

// 检查是否为移动端
const checkIsMobile = () => {
  if (!props.responsive) return
  
  isMobile.value = window.innerWidth < 768
}

// 事件处理
const handlePageChange = (page) => {
  if (page < 1 || page > totalPages.value) return
  
  emit('update:current-page', page)
  emit('page-change', page)
}

const handleSizeChange = (size) => {
  emit('update:page-size', size)
  emit('size-change', size)
  
  // 页面大小变化后，可能需要调整当前页码
  const newTotalPages = Math.ceil(props.total / size)
  if (props.currentPage > newTotalPages) {
    handlePageChange(newTotalPages)
  }
}

const handlePrevClick = (page) => {
  emit('prev-click', page)
}

const handleNextClick = (page) => {
  emit('next-click', page)
}

const handleQuickJump = () => {
  if (jumpPage.value >= 1 && jumpPage.value <= totalPages.value) {
    handlePageChange(jumpPage.value)
  }
}

// 窗口大小变化处理
const handleResize = () => {
  checkIsMobile()
}

// 监听器
watch(() => props.currentPage, (newPage) => {
  jumpPage.value = newPage
}, { immediate: true })

// 生命周期
onMounted(() => {
  checkIsMobile()
  if (props.responsive) {
    window.addEventListener('resize', handleResize)
  }
})

onUnmounted(() => {
  if (props.responsive) {
    window.removeEventListener('resize', handleResize)
  }
})
</script>

<style scoped>
.table-pagination {
  margin-top: 16px;
}

/* 桌面端分页 */
.desktop-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.pagination-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.pagination-info {
  font-size: 14px;
  color: #666;
  white-space: nowrap;
}

.selection-info {
  color: #409eff;
  font-weight: 500;
}

.batch-actions {
  display: flex;
  gap: 8px;
}

.pagination-right {
  display: flex;
  align-items: center;
}

/* 移动端分页 */
.mobile-pagination {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  background: #fafafa;
  border-radius: 8px;
}

.mobile-pagination .pagination-info {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #666;
}

.mobile-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.page-buttons {
  flex: 1;
}

.page-buttons .el-button {
  flex: 1;
}

.mobile-jumper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 14px;
  color: #666;
}

/* 页面大小提示 */
.size-hint {
  margin-top: 8px;
  text-align: center;
}

/* 位置调整 */
.table-pagination[class*="position-left"] .desktop-pagination {
  justify-content: flex-start;
}

.table-pagination[class*="position-center"] .desktop-pagination {
  justify-content: center;
}

.table-pagination[class*="position-right"] .desktop-pagination {
  justify-content: flex-end;
}

/* Element Plus 分页组件样式调整 */
:deep(.el-pagination) {
  --el-pagination-font-size: 14px;
  --el-pagination-bg-color: #f5f7fa;
  --el-pagination-text-color: #606266;
  --el-pagination-border-radius: 4px;
}

:deep(.el-pagination .btn-prev),
:deep(.el-pagination .btn-next) {
  background: white;
  border: 1px solid #dcdfe6;
}

:deep(.el-pagination .btn-prev:hover),
:deep(.el-pagination .btn-next:hover) {
  color: #409eff;
}

:deep(.el-pagination .el-pager li) {
  background: white;
  border: 1px solid #dcdfe6;
  margin: 0 2px;
}

:deep(.el-pagination .el-pager li:hover) {
  color: #409eff;
}

:deep(.el-pagination .el-pager li.is-active) {
  background: #409eff;
  color: white;
  border-color: #409eff;
}

/* 响应式样式 */
@media (max-width: 1024px) {
  .desktop-pagination {
    flex-direction: column;
    align-items: stretch;
  }
  
  .pagination-left,
  .pagination-right {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .table-pagination.mobile .desktop-pagination {
    display: none;
  }
  
  .batch-actions {
    flex-wrap: wrap;
  }
  
  .batch-actions .el-button {
    flex: 1;
    margin: 0;
  }
}

/* 动画效果 */
.table-pagination {
  transition: all 0.3s ease;
}

.mobile-pagination {
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>